<template>
  <div class="stats-wrapper">
    <div class="stats-header">
      <div class="header-left">
      </div>
      <p class="header-text">农村家宴</p>
      <div class="weather">
        <!-- <div class="alarm">
          <img :src="require('./images/icon-weather.png')" />
          <span>暴雨橙色预警</span>
        </div>-->
        <div class="info">{{ weather }}</div>
      </div>
    </div>

    <div class="stats-content">
      <div class="block-left">
        <div class="border-box left1">
          <div class="header">
            <span>星级评定</span>
          </div>
          <div class="container star_container flex w_100 justify_around">
            <div v-for="(item, index) in starArr" :key="index" class="flex_y text_center star_box">
              <div class="pos_a star_box_line" v-if="index!=0"></div>
              <div class="star_count">{{item.count}}</div>
              <div class="star_level">{{item.level}}</div>
            </div>
          </div>
        </div>

        <div class="border-box left2">
          <div class="header posa_header">
            <span>设备在线情况统计</span>
          </div>
          <div class="container full_container">
            <bar-stack id="chart2" :grid="{top: 50}" :color="['#4dbc91', '#a67754']" :data="majorData" :legendText="['总数', '在线数']"></bar-stack>
          </div>
        </div>

        <div class="border-box left3">
          <div class="header">
            <span>乡镇隐患统计</span>
          </div>
          <div class="container">
            <scatter-simple id="chart3" :color="['#2dd2ff']" :data="majorData"></scatter-simple>
          </div>
        </div>

        <div class="border-box left4">
          <div class="header">
            <span>问题分类占比</span>
          </div>
          <div class="container">
            <pie-double id="chart4" :color="['#FFC63C','#4C9DFF', '#f6e036']" :data="trainData" :total="trainTotal"></pie-double>
          </div>
        </div>

        <div class="border-box left5">
          <div class="header">
            <span>监督抽查</span>
          </div>
          <div class="container">
            <bar-special id="chart5" :color="['#0D288F','#148bc3']" :data="majorData"></bar-special>
          </div>
        </div>
      </div>

      <div class="block-center">
        <div class="center1 w_100 justify_between">
          <div class="border-box center_top_box" v-for="(item, index) in centerArr" :key="index">
            <div class="center_top_box_title">
              {{item.name}}
            </div>
            <div class="center_top_box_val">
              {{item.count}}
            </div>
          </div>
        </div>

        <div class="center2">
          <eut-map ref="eut-map" class="map" :mapData="mapData" @change="areaChange"></eut-map>
          <div style="height:50px" @click="areaAroundClick"></div>
        </div>

        <div class="center3">
          <div class="border-box w_100 h_100">
            <div class="header">
              <span>预定数量</span>
            </div>
            <div class="container">
              <bar-simple id="chart11" :grid="{left: 10, right: 10}" :isSeparate="false" :color="['#2AD0FF','#5E4FFF']" :data="orderData"></bar-simple>
            </div>
          </div>
        </div>
      </div>

      <div class="block-right">
        <div class="border-box right1">
          <div class="header posa_header">
            <span>索证索票上传情况</span>
          </div>
          <div class="container">
            <line-simple id="chart6" :grid="{top: 60}" :color="['#92894d','#22d1e5']" :data="lineData" :legendText="['实际数', '上传数']"></line-simple>
            <!-- <test :data="lineData"></test> -->
          </div>
        </div>
        
        <div class="border-box right2">
          <div class="header">
            <span>自查数据</span>
          </div>
          <div class="container">
            <bar-simple id="chart7" :color="['#00FFB5','#0D288F']" :data="majorData"></bar-simple>
          </div>
        </div>

        <div class="border-box right3">
          <div class="header">
            <span>用户评价</span>
            <div class="tabs-wrapper">
              <select style="opacity: 0;position:absolute;width:100%;height:100%;" @change="areaSelect(areaArrIndex)" v-model="areaArrIndex" name="" id="">
                <option v-for="(item,index) in areaArr" :key="index" :value="index">{{item.name}}</option>
              </select>
              <div class="tab-box active">{{areaArr[areaArrIndex].name}}<i class="down_arrow"></i></div>
            </div>
          </div>
          <div class="container">
            <pie-double id="chart8" :color="['#FFC63C','#4C9DFF', '#f6e036']" :data="userEvaluationData" :total="userEvaluationTotal"></pie-double>
          </div>
        </div>

        <div class="border-box right4">
          <div class="header">
            <span>证件统计</span>
            <!-- <div class="tabs-wrapper">
              <div
                v-for="(item, index) in tabs7"
                :key="index"
                class="tab-box"
                :class="{active:tabIndex7===index}"
                @click="changeTab7(index)"
              >{{item.name}}</div>
            </div> -->
          </div>
          <div class="container flex w_100">
            <div style="width: 50%;">
              <div class="sub-header">
                <div class="icon"></div>
                健康证
              </div>
              <div class="sub-container">
                <liquid-simple id="chart9" :data="liquidData" :color="['#4189ec', '#baf5d7', '#fad05a']"></liquid-simple>
              </div>
            </div>
            <div style="width: 50%;">
              <div class="sub-header">
                <div class="icon"></div>
                厨师证
              </div>
              <div class="sub-container">
                <pie-simple id="chart10" :color="['#05e7a3','#3a9beb']" :data="certificateData"></pie-simple>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import VueSeamlessScroll from "vue-seamless-scroll";
import ScrollAnnounce from "./components/scroll-announce.vue";
import PieProgress from "./components/pie-progress.vue";
import PieDouble from "./components/pie-double.vue";
import PieLegend from "./components/pie-legend.vue";
import PieSimple from "./components/pie.vue";
import BarSimple from "./components/bar.vue";
import BarStack from './components/bar-stack.vue';
import BarSpecial from './components/bar-special.vue';
import LineSimple from "./components/line.vue";
import ScatterSimple from "./components/scatter.vue";
import LiquidSimple from "./components/liquid.vue";
import EutMap from "./components/map.vue";
import Test from "./components/test.vue";

import { getStatsData } from "@/api";

export default {
  components: {
    ScrollAnnounce,
    VueSeamlessScroll,
    PieProgress,
    PieDouble,
    PieLegend,
    BarSimple,
    BarSpecial,
    BarStack,
    PieSimple,
    EutMap,
    LineSimple,
    LiquidSimple,
    ScatterSimple,
    Test,
  },
  data() {
    return {
      loading: false,
      currentDateTime: "",
      weather: "",
      indexUrl: "",
      alarmList: [],
      // 预订数量
      orderData: [
        { name: '魏塘街道', count: 50 },
        { name: '罗星街道', count: 60 },
        { name: '开发区', count: 65 },
        { name: '大云镇', count: 100 },
        { name: '西塘镇', count: 102 },
        { name: '姚庄镇', count: 90 },
        { name: '天凝镇', count: 60 },
        { name: '干窑镇', count: 62 },
        { name: '陶庄镇', count: 45 },
      ],
      // area数组
      areaArrIndex: 0,
      areaArr: [
        { name: '魏塘街道' },
        { name: '罗星街道' },
        { name: '开发区' },
        { name: '大云镇' },
        { name: '西塘镇' },
        { name: '姚庄镇' },
        { name: '天凝镇' },
        { name: '干窑镇' },
        { name: '陶庄镇' },
      ],
      // 水球数据
      liquidData: [
        {name: '正常', count: 0.69},
        {name: '临近', count: 0.3},
        {name: '超期', count: 0.2},
      ],
      // 星级评定
      starArr: [
        { level: '3星', count: 378 },
        { level: '2星', count: 35 },
        { level: '1星', count: 100 },
      ],
      centerArr: [
        { name: '家宴中心总数', count: 205 },
        { name: '可使用桌数', count: 180 },
        { name: '可容纳人数', count: 500 },
        { name: '实际交易笔数', count: 600 },
        { name: '交易额', count: 30000 },
      ],
      countArr: [
        { name: "数字激活企业", unit: "家", count: 0 },
        { name: "主体履责登入率", unit: "%", count: 0 },
        { name: "主体履责指数", unit: "%", count: 0 },
        { name: "风险双重预防等级", unit: "%", count: 0 },
      ],
      codeArr: [
        { name: "红码企业", level: "高风险", count: 0, color: "#FF0000" },
        { name: "橙码企业", level: "较大风险", count: 0, color: "#FF6100" },
        { name: "黄码企业", level: "一般风险", count: 0, color: "#FFFF00" },
        { name: "绿码企业", level: "低风险", count: 0, color: "#00FF00" },
      ],
      majorData: [
        { name: '魏塘街道', count: 50, count2: 100},
        { name: '罗星街道', count: 60, count2: 90},
        { name: '开发区', count: 65, count2: 150},
        { name: '大云镇', count: 100, count2: 120},
        { name: '西塘镇', count: 102, count2: 110},
        { name: '姚庄镇', count: 90, count2: 100},
        { name: '天凝镇', count: 60, count2: 90},
        { name: '干窑镇', count: 62, count2: 100},
        { name: '陶庄镇', count: 45, count2: 120},
      ], 
      majorDataOrigin: [],
      ledgerTotal: 0,
      ledgerData: [
        { name: "未完成", count: 0 },
        { name: "已完成", count: 0 },
      ],
      preventTotal: 0,
      preventData: [
        { name: "未完成", count: 0 },
        { name: "已完成", count: 0 },
      ],
      // 厨师证持证数
      certificateData: [
        { name: '未持证数', count: 14 },
        { name: '持证数', count: 186 },
      ],
      troubleArr: [
        { name: "已整改隐患", count: 0 },
        { name: "超期未整改", count: 0 },
        { name: "执法推送", count: 0 },
        { name: "闭环率", count: "0%" },
      ],
      troubleData: [
        { name: '魏塘街道', count: 50, count2: 100},
        { name: '罗星街道', count: 60, count2: 90},
        { name: '开发区', count: 65, count2: 150},
        { name: '大云镇', count: 100, count2: 120},
        { name: '西塘镇', count: 102, count2: 110},
        { name: '姚庄镇', count: 90, count2: 100},
        { name: '天凝镇', count: 60, count2: 90},
        { name: '干窑镇', count: 62, count2: 100},
        { name: '陶庄镇', count: 45, count2: 120},
      ],
      lineData: [
        { name: '魏塘街道', count: 50, count2: 100},
        { name: '罗星街道', count: 60, count2: 90},
        { name: '开发区', count: 65, count2: 150},
        { name: '大云镇', count: 100, count2: 120},
        { name: '西塘镇', count: 102, count2: 110},
        { name: '姚庄镇', count: 90, count2: 100},
        { name: '天凝镇', count: 60, count2: 90},
        { name: '干窑镇', count: 62, count2: 100},
        { name: '陶庄镇', count: 45, count2: 120},
      ],
      userEvaluationTotal: 100,
      userEvaluationData: [
        {name: '好', count: 50},
        {name: '良', count: 25},
        {name: '差', count: 25},
      ],
      trainTotal: 0,
      trainData: [
        { name: "问题1", count: 0 },
        { name: "问题2", count: 0 },
        { name: "问题3", count: 0 },
      ],
      publicArr: [
        { name: "到期数", count: 0, color: "#FF1B1B" },
        { name: "临期数", count: 0, color: "#FFFF00" },
      ],
      publicList: [],
      publicListOrigin: [],
      mapData: [
        {
          name: "魏塘街道",
          adcode: 330421001000,
          count: 0,
          percent: 0,
          status: "1",
        },
        {
          name: "罗星街道",
          adcode: 330421002000,
          count: 0,
          percent: 0,
          status: "1",
        },
        {
          name: "惠民街道",
          adcode: 330421003000,
          count: 0,
          percent: 0,
          status: "1",
        },
        {
          name: "大云镇",
          adcode: 330421102000,
          count: 0,
          percent: 0,
          status: "1",
        },
        {
          name: "西塘镇",
          adcode: 330421103000,
          count: 0,
          percent: 0,
          status: "1",
        },
        {
          name: "干窑镇",
          adcode: 330421105000,
          count: 0,
          percent: 0,
          status: "1",
        },
        {
          name: "陶庄镇",
          adcode: 330421107000,
          count: 0,
          percent: 0,
          status: "1",
        },
        {
          name: "姚庄镇",
          adcode: 330421111000,
          count: 0,
          percent: 0,
          status: "1",
        },
        {
          name: "天凝镇",
          adcode: 330421112000,
          count: 0,
          percent: 0,
          status: "1",
        },
      ],

      tabIndex2: 0,
      tabs2: [
        { name: "三场所三企业" },
        { name: "危化品" },
        { name: "厂房类别" },
      ],
      tabIndex3: 0,
      tabs3: [{ name: "月" }, { name: "年" }],
      tabIndex4: 0,
      tabs4: [{ name: "月" }, { name: "年" }],
      tabIndex6: 0,
      tabs6: [{ name: "月" }, { name: "年" }],
      tabIndex7: 0,
      tabs7: [{ name: "证书" }, { name: "检测&评价报告" }],
      scrollOption: {},
      scrollVisible: false,
      TimerScroll: 0,
      Interval: 0,
      IntervalTime: 0,
    };
  },
  mounted() {
    this.setScrollOption();
    window.addEventListener("resize", this.setScrollOption);

    this.getData();
    this.Interval && clearInterval(this.Interval);
    this.Interval = setInterval(() => {
      this.getData();
    }, 120000);

    this.getDateTime();
    this.IntervalTime && clearInterval(this.IntervalTime);
    this.IntervalTime = setInterval(() => {
      this.getDateTime();
    }, 60000);
  },
  beforeDestroy() {
    this.Interval && clearInterval(this.Interval);
    this.IntervalTime && clearInterval(this.IntervalTime);
    window.removeEventListener("resize", this.setScrollOption);
  },
  methods: {
    areaSelect (e) {
      console.log(e)
    },
    setScrollOption() {
      this.TimerScroll && clearTimeout(this.TimerScroll);
      this.scrollVisible = false;
      let wrap = this.$refs.scroll;
      let num = Math.floor(wrap.offsetHeight / 34);
      this.scrollOption = {
        step: 0.3, // 数值越大速度滚动越快
        limitMoveNum: num, // 开始无缝滚动的数据量
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true,
        singleHeight: 0,
        singleWidth: 0,
        waitTime: 100, // 单步运动停止的时间(默认值1000ms)
      };
      this.TimerScroll = setTimeout(() => {
        this.scrollVisible = true;
      }, 300);
    },

    gotoBackend() {
      this.indexUrl && window.open(this.indexUrl, "_blank");
    },
    changeTab2(index) {
      this.tabIndex2 = index;
      this.majorData = this.majorDataOrigin[index].levelInfo.map((item) => {
        return { name: item.name, count: item.count || 0 };
      });
    },
    changeTab7(index) {
      this.tabIndex7 = index;
      let data = this.publicListOrigin[index];
      this.publicArr[0].count = data.expireCount || 0;
      this.publicArr[1].count = data.nearExpireCount || 0;
      this.publicList = (data.dataList || []).map((item) => {
        return {
          enterpriseName: item.compnay,
          certificate: item.name,
          status:
            item.status === "过期" || item.status === "到期"
              ? "1"
              : item.status === "临期"
              ? "2"
              : "",
          statusText: item.status,
          expireDate: item.expireDate,
        };
      });
      this.setScrollOption();
    },

    async getData(area) {
      area = area || 330421;
      console.log(area, 'area=======')
      this.loading = true;
      let res = await getStatsData({ area });
      this.loading = false;
      // if (res && res.status === 200) {
      if (false) {
        this.weather = res.content.weather;
        this.indexUrl = res.content.indexUrl;

        this.alarmList = res.content.pushList || [];
        this.$refs.scrollAlarm && this.$refs.scrollAlarm.restart();

        this.codeArr[0].count = res.content.companyLevel.l1 || 0;
        this.codeArr[1].count = res.content.companyLevel.l2 || 0;
        this.codeArr[2].count = res.content.companyLevel.l3 || 0;
        this.codeArr[3].count = res.content.companyLevel.l4 || 0;

        this.ledgerTotal = res.content.bookData.allCount || 0;
        this.ledgerData[0].count = res.content.bookData.count2 || 0;
        this.ledgerData[1].count = res.content.bookData.count1 || 0;

        this.preventTotal = res.content.riskData.allCount || 0;
        this.preventData[0].count = res.content.riskData.count2 || 0;
        this.preventData[1].count = res.content.riskData.count1 || 0;

        this.countArr[0].count = res.content.companyCount || 0;
        this.countArr[1].count = res.content.loginCount || 0;
        this.countArr[2].count = res.content.finishCount || 0;
        this.countArr[3].count = res.content.riskCount || 0;

        this.majorDataOrigin = res.content.dangerCompanyLevel;
        this.tabs2 = (res.content.dangerCompanyLevel || []).map((item) => {
          return { name: item.level1Name };
        });
        let levelInfo =
          res.content.dangerCompanyLevel[this.tabIndex2].levelInfo || [];
        this.majorData = levelInfo.map((item) => {
          return { name: item.name, count: item.count || 0 };
        });

        this.troubleArr[0].count = res.content.problemData.finishCount || 0;
        this.troubleArr[1].count = res.content.problemData.expireCount || 0;
        this.troubleArr[2].count = res.content.problemData.pushCount || 0;
        this.troubleArr[3].count =
          (res.content.problemData.finishRate || 0) + "%";

        this.troubleData = (res.content.problemData.info || []).map((item) => {
          return { name: item.name, count: item.count || 0 };
        });

        this.trainTotal = res.content.trainData.allCount || 0;
        this.trainData[0].count = res.content.trainData.count2 || 0;
        this.trainData[1].count = res.content.trainData.count1 || 0;

        this.publicListOrigin = [
          res.content.certNotice,
          res.content.checkNotice,
        ];
        let publicData = this.publicListOrigin[this.tabIndex7];
        this.publicArr[0].count = publicData.expireCount || 0;
        this.publicArr[1].count = publicData.nearExpireCount || 0;
        let dataList = publicData.dataList || [];
        this.publicList = dataList.map((item) => {
          return {
            enterpriseName: item.compnay,
            certificate: item.name,
            status:
              item.status === "过期" || item.status === "到期"
                ? "1"
                : item.status === "临期"
                ? "2"
                : "",
            statusText: item.status,
            expireDate: item.expireDate,
          };
        });

        if (area == 330421) {
          this.mapData = (res.content.areaList || []).map((item) => {
            return {
              id: item.id,
              name: item.name,
              adcode: `${item.id}000`,
              count: item.companyCount || 0,
              percent: item.finishCount || 0,
              status: "1",
              url: item.url,
            };
          });
        }
      } else {
        this.initData();
      }
    },
    initData() {
      this.weather = "";
      this.indexUrl = "";

      this.alarmList = [];
      this.$refs.scrollAlarm && this.$refs.scrollAlarm.restart();

      this.codeArr[0].count = 0;
      this.codeArr[1].count = 0;
      this.codeArr[2].count = 0;
      this.codeArr[3].count = 0;

      this.ledgerTotal = 0;
      this.ledgerData[0].count = 0;
      this.ledgerData[1].count = 0;

      this.preventTotal = 0;
      this.preventData[0].count = 0;
      this.preventData[1].count = 0;

      this.countArr[0].count = 0;
      this.countArr[1].count = 0;
      this.countArr[2].count = 0;
      this.countArr[3].count = 0;

      this.majorDataOrigin = [];
      this.tabs2 = [
        { name: "三场所三企业" },
        { name: "危化品" },
        { name: "厂房类别" },
      ];
      this.majorData = [];

      this.troubleArr[0].count = 0;
      this.troubleArr[1].count = 0;
      this.troubleArr[2].count = 0;
      this.troubleArr[3].count = "0%";

      this.troubleData = [
        {name: '未持证数', count: 14},
        {name: '持证数', count: 186},
        {name: '证数', count: 154},
        {name: '持数', count: 16},
        {name: '未持数', count: 114},
        {name: '持证', count: 86},
        {name: '未持证', count: 24},
        {name: '1持证数', count: 46},
        {name: '未23持证数', count: 54},
        {name: '持s证数', count: 16},
      ];

      this.trainTotal = 0;
      this.trainData[0].count = 0;
      this.trainData[1].count = 0;

      this.publicListOrigin = [];
      this.publicArr[0].count = 0;
      this.publicArr[1].count = 0;
      this.publicList = [];

      this.mapData = [
        {
          name: "魏塘街道",
          adcode: 330421001000,
          count: 0,
          percent: 0,
          status: "1",
        },
        {
          name: "罗星街道",
          adcode: 330421002000,
          count: 0,
          percent: 0,
          status: "1",
        },
        {
          name: "惠民街道",
          adcode: 330421003000,
          count: 0,
          percent: 0,
          status: "1",
        },
        {
          name: "大云镇",
          adcode: 330421102000,
          count: 0,
          percent: 0,
          status: "1",
        },
        {
          name: "西塘镇",
          adcode: 330421103000,
          count: 0,
          percent: 0,
          status: "1",
        },
        {
          name: "干窑镇",
          adcode: 330421105000,
          count: 0,
          percent: 0,
          status: "1",
        },
        {
          name: "陶庄镇",
          adcode: 330421107000,
          count: 0,
          percent: 0,
          status: "1",
        },
        {
          name: "姚庄镇",
          adcode: 330421111000,
          count: 0,
          percent: 0,
          status: "1",
        },
        {
          name: "天凝镇",
          adcode: 330421112000,
          count: 0,
          percent: 0,
          status: "1",
        },
      ];
    },

    areaChange(v) {
      this.getData(v);
    },
    areaAroundClick() {
      this.$refs["eut-map"] && this.$refs["eut-map"].clickAround();
      this.getData();
    },

    getDateTime() {
      let today = new Date();
      let year = today.getFullYear();
      let month = today.getMonth() + 1;
      let day = today.getDate();
      let hour = today.getHours();
      let min = today.getMinutes();
      let week = today.getDay() + 1;
      switch (week) {
        case 1:
          week = "一";
          break;
        case 2:
          week = "二";
          break;
        case 3:
          week = "三";
          break;
        case 4:
          week = "四";
          break;
        case 5:
          week = "五";
          break;
        case 6:
          week = "六";
          break;
        case 7:
          week = "日";
          break;
        default:
          week = "*";
      }
      let noon = hour < 12 ? "上午" : "下午";

      this.currentDateTime = `${year}年${month}月${day}日 星期${week} ${noon}${hour}:${min}`;
    },
  },
};
</script>

<style lang="less" scoped>
@import "./page.less";
.flex{display: flex!important;}
.flex_y{display: flex!important;flex-direction: column!important;}
.justify_between{justify-content: space-between!important;}
.justify_center{justify-content: center!important;}
.justify_around{justify-content: space-around!important;}
.align_end{align-items: flex-end!important;}
.align_center{align-items: center!important;}
.align_start{align-items: flex-start!important;}
.text_center{text-align: center!important;}
.w_100{width: 100%!important;}
.h_100{height: 100%!important;}
.pos_a{position: absolute!important;}
.pos_lt{position: absolute!important;left: 0;top: 0;}
.posa_header{position: absolute!important;left: 16px;top: 4px;}
.down_arrow{
  border: solid #0080A7;
  border-width: 0 1px 1px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  margin-left: 6px;
  margin-bottom: 2px;
}
.center_top_box{
  width: 18%;
  height: calc((100vh - 804px) / 3);
  min-height: 80px;
  text-align: center;
  flex-shrink: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  .center_top_box_title{
    margin-top: 10px;
    font-size: 18px;
    color: #8fbafe;
    white-space: nowrap;
    display: flex;
    justify-content: center;
  }
  .center_top_box_val{
    font-size: 24px;
    color: #22e7f3;
  }
}
.star_container{
  .star_box{
    position: relative;
    width: 33.3%;
    justify-content: center;
    .star_box_line{
      left: 0;
      width: 1px;
      height: 80%;
      background: linear-gradient(rgba(52,234,244,0.1), rgba(52,234,244,1), rgba(52,234,244,0.1));;
    }
    .star_count{
      font-size: 24px;
      color: #22e7f3;
      font-weight: bold;
    }
    .star_level{
      font-size: 14px;
      color: #8fbafe;
    }
  }
}
.stats-wrapper .stats-content .block-left .container.full_container{
}
.sub-header{
  position: relative;
  height: 20px;
  display: flex;
  align-items: center;
  font-size: 15px;
  .icon{
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid transparent;
    border-left: 8px solid #2d74f4;
  }
}
.sub-container{
  min-height: 174px;
  height: calc((100vh - 450px) * 0.33)
}
.stats-wrapper .stats-content .block-left .left2 .container{
  min-height: 172px;
  height: calc((100vh - 320px) / 4);
}
</style>